<template>
  <div class="testHome">
    <swiper-view></swiper-view>
    <!-- 图表部分 -->
    <div>
      <el-row :gutter="20">
        <el-col :span="11">
          <div class="grid-content ep-bg-purple">
            <div class="bugbox">
              <div class="lbox">
                <div class="titleBox"><p>问题总数</p>
                <h2>{{ total? total:0 }}</h2></div>
                <div id="main5" style="width: 180px; height: 170px; margin: 40px auto"></div>
              </div>
              <div class="rbox">
                <div class="rlbox">
                  <div>
                    <p>已处理</p>
                    <h2 class="rth4">{{ processed?processed:0 }}</h2>
                  </div>
                  <div>
                    <p>待处理</p>
                    <h2 class="rbh4">{{ pending? pending:0 }}</h2>
                  </div>
                </div>
                <div class="rrbox">
                  <!-- 已解数量决表单1111111111111 -->
                  <div id="main1" style="width: 180px; height: 170px"></div>

                  <!-- 未解决数量表单1111111111111111 -->
                  <div id="main2" style="width: 180px; height: 170px"></div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content ep-bg-purple-light">
            <!--人员工作数据表-->
            <myEchart></myEchart>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, resolveDirective } from 'vue'
import SwiperView from '@/components/SwiperView.vue'
import * as echarts from 'echarts'
import myChart from '../components/MyEcharts.vue'
import myEchart from '../components/MyEcharts1.vue'
import { developerQuery } from '../services/developerService'

// 数据渲染
//  bug
let total: any = ref() //数据总数
let pending: any = ref() //待处理
let processing: any = ref() //处理中
let processed: any = ref() //已处理
let dataList = ref([])

onMounted(async () => {
  let res = await developerQuery({})
  if (res.data.code == 200) {
    total.value = res.data.data.length
    let noList = res.data.data.filter((item: any) => item.type == 1)
    let inList = res.data.data.filter((item: any) => item.type == 2)
    let yesList = res.data.data.filter((item: any) => item.type == 3)
    pending.value = noList.length
    processing.value = inList.length
    processed.value = yesList.length
  }
  // 已处理环形图
  var chartDom = document.getElementById('main1')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: total.value, itemStyle: { color: '#D3DCE6' } },
          { value: processed.value, itemStyle: { color: '#00cc00' } },
        ]
      }
    ],
    graphic: {
      // 这部分代码用于在环形图中心添加文本
      type: 'text',
      left: 'center', // 文本的水平位置
      top: 'center', // 文本的垂直位置
      style: {
        text: `已处理数${processed.value}`, // 要显示的文本内容
        textAlign: 'center', // 文本对齐方式
        fill: '#00cc00', // 文本颜色
        width: 30, // 文本的宽度（可选）
        height: 30, // 文本的高度（可选）
        fontSize: 12 // 字体大小
      }
    }
  }

  option && myChart.setOption(option)

  // 处理中环形图
  var chartDom = document.getElementById('main5')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: total.value, itemStyle: { color: '#D3DCE6' } },
          { value: processing.value, itemStyle: { color: '#409eff' } }
        ]
      }
    ],
    graphic: {
      // 这部分代码用于在环形图中心添加文本
      type: 'text',
      left: 'center', // 文本的水平位置
      top: 'center', // 文本的垂直位置
      style: {
        text: `处理中${processing.value}`, // 要显示的文本内容
        textAlign: 'center', // 文本对齐方式
        fill: 'orange', // 文本颜色
        width: 30, // 文本的宽度（可选）
        height: 30, // 文本的高度（可选）
        fontSize: 12 // 字体大小
      }
    }
  }

  option && myChart.setOption(option)

  // 待处理环形图
  var chartDom = document.getElementById('main2')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: total.value, itemStyle: { color: '#D3DCE6' } },
          { value: pending.value, itemStyle: { color: 'orange' } }
        ]
      }
    ],
    graphic: {
      // 这部分代码用于在环形图中心添加文本
      type: 'text',
      left: 'center', // 文本的水平位置
      top: 'center', // 文本的垂直位置
      style: {
        text: `待处理数${pending.value}`, // 要显示的文本内容
        textAlign: 'center', // 文本对齐方式
        fill: 'orange', // 文本颜色
        width: 30, // 文本的宽度（可选）
        height: 30, // 文本的高度（可选）
        fontSize: 12 // 字体大小
      }
    }
  }

  option && myChart.setOption(option)
})
</script>

<style scoped>
.testHome {
  width: 100%;
  overflow: hidden;
}
.bugbox {
  width: 100%;
  height: 100%;
  text-align: center;
}
.bugbox .lbox {
  width: 40%;
  height: 340px;
  float: left;
  padding-top: 55px;
  box-sizing: border-box;
}
.bugbox .lbox h2 {
  color: #409eff;
}

.bugbox .rbox {
  width: 60%;
  height: 340px;
  float: left;
}

.bugbox .rbox .rlbox {
  width: 40%;
  height: 340px;
  float: left;
}

.bugbox .rbox .rlbox div {
  box-sizing: border-box;
  padding-top: 55px;
  height: 180px;
}

.bugbox .rbox .rlbox div:first-child h2 {
  color: green;
}

.bugbox .rbox .rlbox div:last-child h2 {
  color: orange;
}

.bugbox .rbox .rrbox {
  width: 60%;
  height: 340px;
  float: left;
}
.titleBox{
    font-size:20px;
}
</style>
